<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css_盒子的内边区_padding</title>
  <style>
      h1{
          background-color: red;
          width: 300px;
          height: 300px;
          /*padding-top: 10px;*/
          /*padding-bottom: 10px;*/
          /*padding-left: 10px;*/
          /*padding-right: 10px;*/
          padding: 10px;
      }

      span{
          background-color: blue;
          padding-left: 100px;
          padding-right: 200px;
          border: red 1px solid;
      }


  </style>
</head>
<body>
<!--
    盒子的内边区：
    1.padding-top：设置元素的上内边距
    2.padding-bottom：设置元素的下内边距
    3.padding-left：设置元素的左内边距
    4.padding-right：设置元素的右内边距
    5.padding：设置元素的内边距
    6.padding: 10px 四个方式都是10ox
    7.padding: 10px 20px 上下10px 左右20px
    8.padding: 10px 20px 30px 上10px 左右20px 下30px
    9.padding: 10px 20px 30px 40px 上10px 左20px 下30px 右40px
    注意：
        padding的值不能是负数。
        行内元素的左右内边距是没有问题的，但是上下内边距不能完美的设置。
        块级元素、行内块元素四个方向上的内边距都可以设置。
-->
    <h1>11123333</h1>
    <span>这是一个行内元素</span>
</body>
</html>